<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用FileReader进行图片预览</title>
</head>

<body>
    https://www.cnblogs.com/AaronNotes/p/6526479.html
    <input type="file"><br>
    <img src="" height="200" alt="Image preview area..." title="preview-img">
    <script>
        var fileInput = document.querySelector('input[type=file]'),
            previewImg = document.querySelector('img');
        fileInput.addEventListener('change', function () {
            var file = this.files[0];
            var reader = new FileReader();
            // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
            reader.addEventListener("load", function () {
                previewImg.src = reader.result;
            }, false);
            // 调用reader.readAsDataURL()方法，把图片转成base64
            reader.readAsDataURL(file);
        }, false);
    </script>
</body>

</html>